<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <title>Custom Title</title>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <style>
    body {
      text-align: center;
      color: white;
      margin: 0;
      background: #111;
      min-width: 960px;
    }
  </style>
  <script src='/auth_assets/main.js'></script>
  <script src="//d3js.org/d3.v3.min.js"></script>
</head>

<body>
  <h1>
    Authentication successful
  </h1>
  <a href="https://bl.ocks.org/mbostock/9539958">
    Just an example how to load custom HTML!
  </a>
</body>

<script>
  var width = Math.max(960, innerWidth),
    height = Math.max(500, innerHeight);

  var x1 = width / 2,
    y1 = height / 2,
    x0 = x1,
    y0 = y1,
    i = 0,
    r = 200,
    τ = 2 * Math.PI;

  var canvas = d3.select("body").append("canvas")
    .attr("width", width)
    .attr("height", height)
    .on("ontouchstart" in document ? "touchmove" : "mousemove", move);

  var context = canvas.node().getContext("2d");
  context.globalCompositeOperation = "lighter";
  context.lineWidth = 2;

  d3.timer(function () {
    context.clearRect(0, 0, width, height);

    var z = d3.hsl(++i % 360, 1, .5).rgb(),
      c = "rgba(" + z.r + "," + z.g + "," + z.b + ",",
      x = x0 += (x1 - x0) * .1,
      y = y0 += (y1 - y0) * .1;

    d3.select({}).transition()
      .duration(2000)
      .ease(Math.sqrt)
      .tween("circle", function () {
        return function (t) {
          context.strokeStyle = c + (1 - t) + ")";
          context.beginPath();
          context.arc(x, y, r * t, 0, τ);
          context.stroke();
        };
      });
  });

  function move() {
    var mouse = d3.mouse(this);
    x1 = mouse[0];
    y1 = mouse[1];
    d3.event.preventDefault();
  }

</script>

</html>
